<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇丰银行</title>
    <!-- 网页描述 -->
    <meta name="desrption" content="汇丰银行、个人银行">
    <!-- 网页关键词 -->
    <meta name="keywords" content="存储、理财">
    <!-- 引入icon图标 -->
    <link rel="stylesheet" href="#">
    <!-- 引入重置样式文件 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="./css/iconfont.css">
    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="./css/public.css">
    <!-- 引入自身页面样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>

  <header>
    <div class="borderbox clearfix">
        <div class="w">
            <div class="top">
                <ul class="bank clearfix">
                    <li>
                        <a href="#">个人银行&nbsp;&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">&nbsp;&nbsp;小企业服务&nbsp;&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">&nbsp;&nbsp;小企业服务&nbsp;&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">&nbsp;&nbsp;环球银行及资本市场&nbsp;&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">&nbsp;&nbsp;私人银行&nbsp;&nbsp;|</a>
                    </li>
                    <li>
                        <a href="#">&nbsp;&nbsp;村镇银行&nbsp;&nbsp;</a>
                    </li>
                </ul>
                <ul class="inland clearfix">
                    <li class="red">
                    <a href="#">登录&nbsp;&nbsp;<i class="iconfont icon-xiajian"></i></a>
                    </li>
                    <li>
                    <a href="#">简体&nbsp;&nbsp;<i class="iconfont icon-xiajian"></i></a>
                   </li>
                    <li>
                    <a href="#"><span></span>中国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont icon-xiajia"></i></a>
                   </li>
                </ul>
                <div class="striangle">
                </div>
            </div>
        </div>
    </div>
    <div class="w">
        <div class="hui clearfix">
            <img class="feng" src="./images/huifeng.png" alt="">
            <ul class="serve clearfix">
                <li>
                    <a href="#">
                        <p class="p1">银行服务</p>
                        <p class="p2">账户及借记卡</p>&nbsp;&nbsp;
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p class="p1">借贷</p>
                        <p class="p2">贷款及信用卡</p>&nbsp;&nbsp;
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p class="p1">投资</p>
                        <p class="p2">投资及理财</p>&nbsp;&nbsp;
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p class="p1">保险</p>
                        <p class="p2">产品及服务</p>&nbsp;&nbsp;
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p class="p1">财富远见</p>
                        <p class="p2">市场资讯及财富规划</p>&nbsp;&nbsp;
                    </a>
                </li>
                <li class="bgf">
                    <a href="#">
                        <p class="p1">全渠道银行</p>
                        <p class="p2">电子银行及分支行</p>&nbsp;&nbsp;
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</header>
<article>
   <div class="second">
       <div class="w">
           <div class="two">
               <div class="guangzhou">
                 <img class="pictu" src="./images/hui.jpg" alt="">
                 <section>
                     <h2>汇飨大湾在广州</h2>
                     <p>臻选美食+最高人民币800元刷卡金  不容错过</p>
                     <form action="
                     #">
                     <button value="了解详情">了解详情</button>
                    </form>
                 </section>
               </div>
               <div class="publicity">
                    <div class="shang">
                        <a href="#">
                            <h3>汇丰中国信用卡   <i class="iconfont icon-youjian1"></i></h3>
                            <p>成功申请即享精彩礼遇，随心还款，尽享便捷。</p>
                        </a>
                    </div>
                    <div class="xia">
                      <a href="#">
                        <h3>非常周末+   <i class="iconfont icon-youjian1"></i></h3>
                        <p>汇丰信用卡为您打造周末用餐、购物、休闲，娱乐好去处</p>
                      </a>
                    </div>
               </div>
           </div>
       </div>
   </div>
   <div class="third">
       <div class="w">
           <div class="huifengyin clearfix">
            <div class="lis1">
                <img src="./images/hui.png" alt="">
                <a href="#">
                    <span>汇丰尚玉</span><i class="iconfont icon-youjian1"></i>
                    <p>尚臻无界  玉成大家</p>
                </a>
            </div>
            <div class="lis1">
                <img src="./images/hui1.png" alt="">
                <a href="#">
                    <span>推诚相“荐”越荐越多礼</span><i class="iconfont icon-youjian1"></i>
                    <p>汇丰亲友推荐建立计划</p>
                </a>
            </div>
            <div class="lis">
             <img src="./images/hui2.png" alt="">
             <a href="#">
                 <span>汇丰携手签证代理机构VFS</span>
                 <!-- 为什么空格就换行 -->
                 <span>Globla</span>
                 <i class="iconfont icon-youjian1"></i>
                 <p>为有出国需求的您提供便捷高效的支持</p>
             </a>
            </div>
           </div>
       </div>
   </div>
   <div class="fou clearfix">
       <div class="w">
           <div class="four clearfix">
               <div class="lis2">
                   <a href="#">
                       <span>汇丰汇款业务</span><i class="iconfont icon-youjian1"></i>
                       <p>以优质的存款业务，帮您轻松积累财富并管理个人财务</p>
                      </p>
                   </a>
                   <a href="#">
                    <p class="p1">返回顶部<em class="iconfont icon-shangjiantou"></em>
                   </a>
               </div>
               <div class="lis2">
                   <a href="#">
                       <span>汇丰投资及理财产品</span><i class="iconfont icon-youjian1"></i>
                       <p>提供结构性产品、代客境外理财、国内基金以及香港互认基金等多种选择，助力您提升财富增值潜力。</p>
                   </a>
               </div>
               <div class="lis2">
                   <a href="#">
                       <span>汇丰留学汇款</span><i class="iconfont icon-youjian1"></i>
                       <p>立刻通过汇丰中国手机银行或汇丰中国微信服务号体验在线留学汇款</p>
                   </a>
               </div>
               
               <div class="lis4">
                <a href="#">
                    <span>汇丰个人手机银行</span><i class="iconfont icon-youjian1"></i>
                    <p>环球账户管理、投资理财、信用卡消费等一站式服务，一指搞定安全无忧，您的贴心掌上金融助理</p>
                </a>
               </div>
           </div>
       </div>
   </div>
   <div class="cal">
       <div class="w">
           <div class="call">
              <div class="tr1 tr4">
                   <a href="#">
                       <em class="iconfont icon-dianhua"></em>
                       <span>联系汇丰</span>
                       <p>致电或留言给我们 <i class="iconfont icon-youjian1"></i></p>  
                   </a>
              </div>
              <div class="tr1">
                   <a href="#">
                       <em class="iconfont icon-dingwei"></em>
                       <span>寻找汇丰分行</span>
                       <p>及附近的自动柜员机位置 <i class="iconfont icon-youjian1"></i></p>  
                   </a>
              </div>
              <div class="tr1">
                   <a href="#">
                       <em class="iconfont icon-i1"></em>
                       <span>帮助和支持</span>
                       <p>查看常见问题，表格及服务费率 <i class="iconfont icon-youjian1"></i></p>  
                   </a>
              </div>
              <div class="tr2">
                <a href="#">
                    <em class="iconfont icon-diqiu"></em>
                    <span>关于汇丰</span>
                    <p>职业发展、媒体联系 、投资者关系及公司信息 <i class="iconfont icon-youjian1"></i></p>  
                </a>
              </div>
           </div>
       </div>
   </div>
</article>
<footer>
    <div class="bot">
        <div class="w">
            <div class="bottom">
                <ul class="secret">
                    <li>
                        <a href="#">保密及安全</a>
                    </li>
                    <li>
                        <a href="#">使用条款</a>
                    </li>
                    <li>
                        <a href="#">网站链接及规定</a>
                    </li>
                    <li>
                        <a href="#">网络安全</a>
                    </li>
                    <li>
                        <a href="#">消费者教育</a>
                    </li>
                </ul>
                <ul class="remark">
                    <li>
                        &copy;版权所有。  汇丰银行（中国）有限公司2019  不得转载。  
                    </li>
                    <li>
                       沪ICP备15029387号
                    </li>
                    <li>
                        上海工号
                    </li>
                    <li>
                      <img src="./images/jing.png" alt="">
                      沪公网安备  31011502400282号
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
</body>
</html>